<template>
    <view class="submitorder">
        <view class="header"></view>
        <view class="title">
            <view class="header-title">
                <image src="https://z3.ax1x.com/2021/04/10/caRmMF.png" mode=""></image>
                <view class="header-title-time">
                    <text>剩余支付时间</text>
                    <view class="countdowntime">
						<uni-countdown  :show-day="false"   color="#ff5300"   :minute="30" :second="0"></uni-countdown>
					</view>
                </view>
                <view class="header-title-price">￥{{Allprice}}</view>
            </view>
            <view class="payment-title">请选择付款方式</view>
            <view class="payment">
                <view class="WeChat-payment">
				
					<radio-group v-for="(item,index) in radioItems" :key="index">
						<view>
						    <image :src="item.image" mode=""></image>
						    <text>{{item.value}}</text>
						</view>
						<label class="radio"><radio  color="#ff5300"  :checked="item.checked"  @click="radioChange(item.id)"/></label>
					</radio-group>
                </view>
            </view>
        </view>
        <button type="primary" @tap="tapBtn('custom')" class="submitbtn" >确认支付</button>
		<!-- 弹出框 -->
		<chunLei-modal ref="chunLeiModal" v-model="value" :mData="data" :isVisible="isVisible" :type="type" @onConfirm="onConfirm" :navHeight="0">
			<div class="custom-view" @tap.stop>
				<div class="payshow">
					<image class="image" src="https://z3.ax1x.com/2021/04/10/caLClj.png" mode=""></image>
					<view class="foot">
						<view>支付成功</view>
						<navigator url="../mall" open-type="reLaunch">
							<button type="primary" class="btn">返回首页</button>
						</navigator>
						<view class="foot-img">
							<text>查看订单详情</text>
							<image class="image1" src="https://z3.ax1x.com/2021/04/08/cYkTVs.png" mode=""></image>
						</view>
					</view>
				</div>
			</div>
		</chunLei-modal>
		
       
    </view>
</template>

<script>
import chunLeiModal from '../../../components/mall-modal/mall-modal.vue';
import TabMask from '../../../components/mall-modal/tabMask.js'

import {createNamespacedHelpers} from "vuex"
const {mapState,mapMutations,mapActions} = createNamespacedHelpers("mall");

export default {
    data() {
        return {
            value: false,
            type: 'default',
            data: {},
			Allprice:'',
			radioItems: [
					{
						id:1,
						value: '微信支付',
						image:"https://z3.ax1x.com/2021/04/10/caclIP.png",
						checked:false
					},
					{
						id:2,
						value: '支付宝',
						image:"https://z3.ax1x.com/2021/04/10/cacGRS.png",
						checked:false
					},
					{
						id:3,
						value: '钱包',
						image:"https://z3.ax1x.com/2021/04/10/cacUqs.png",
						checked:false
					},
					{
						id:4,
						value:'Apple Pay',
						image:"https://z3.ax1x.com/2021/04/10/cac0I0.png",
						checked:false
					}
			  ]
        };
    },
    components: {
        chunLeiModal
    },
	onShow() {
		this.tabMask = new TabMask({opacity:0.6})
	},
	onLoad(option) {
		this.Allprice=option.getTotalPrice		
	},
	computed:{
		// ...mapState(["typelist"])
		  
	},
    methods: {
		//添加新增商品购买订单
		// ...mapMutations(["setList"]),
		...mapActions(["addpaylist"]),
		
		
		//点击切换样式
		radioChange(e){
			const val= this.radioItems.filter((item)=>item.id==e)
			// console.log(val[0].checked)
			if(!val[0].checked){
				val[0].checked=true
				
			}else{
				val[0].checked=false
			}
			
			
		},
		
        tapBtn(type) {
			console.log(type,366666);
            this.type = type;
			const value=this.radioItems.filter((item)=>item.checked==true)
			if(value.length==1){
				 this.value = !this.value;
				 //生成订单传给后台
				 let val=uni.getStorageSync('paygoodlist')
				 // console.log(val);
				 val.forEach((item)=>{
				 	const newval= {
				 		//用户收获地址id
				 	  "addressId": 1,
				 	  //优惠券id
				 	  "couponInfoId": 1,
				 	  "productDetailOrders": [
				 	    {  
				 			//商品数量
				 	      "productCount": item.productSeckill,
				 			//商品id
				 	      "productId": item.productId
				 	    }
				 	  ]
				 	} 
				 	this.addpaylist(newval)
				 })
				 uni.removeStorageSync('paygoodlist')
			}else{
				uni.showToast({
					icon:'none',
					title:'请勾选一种支付方式'
				})
			}
            switch (this.type) {
                case 'default':
                    this.data = this.defaultData;
                    break;
                case 'select':
                    this.data = this.selectData;
                    break;
                case 'advert':
                    this.data = this.advertData;
                    break;
                case 'share':
                    this.data = this.shareData;
                    break;
                case 'input':
                    this.data = this.inputData;
                    break;
                case 'multiSelect':
                    this.data = this.multiSelectData;
                    break;
                case 'notify':
                    this.data = this.notifyData;
                    break;
            }
        }
		
	}
};
</script>

<style lang="scss">
.submitorder {
    background-color: #f9f9f9;
    height: 100vh;
    .header {
        padding: 0 30rpx;
        height: 120rpx;
        background-color: #ff6208;
        box-sizing: border-box;
    }
    .title {
        padding: 0 30rpx;
        .header-title {
            margin: auto;
            height: 180rpx;
            background-color: #ffffff;
            border-radius: 24rpx;
            margin-top: -60rpx;
            padding: 35rpx;
            box-sizing: border-box;
            position: relative;
            image {
                width: 50rpx;
                height: 45rpx;
                position: absolute;
                left: 30rpx;
                top: 0;
            }
            .header-title-time {
                text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
                text:nth-child(1) {
                    font-size: 28rpx;
                    color: #999999;
                }
				.countdowntime{
					font-size: 28rpx;
				}
                
            }
            .header-title-price {
                text-align: center;
                margin-top: 30rpx;
                font-size: 38rpx;
                color: #ff6208;
                font-weight: 600;
            }
        }
        .payment-title {
            font-size: 24rpx;
            color: #999999;
            margin-top: 24rpx;
        }
        .payment {
            // height: 320rpx;
            border-radius: 24rpx;
            margin-top: 24rpx;
            padding: 24rpx 24rpx 24rpx 24rpx;
            background-color: #ffffff;
            .WeChat-payment {
				radio-group{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
                view {
                    text {
                        font-size: 28rpx;
                        color: #333333;
                    }
                    image {
                        width: 35rpx;
                        height: 35rpx;
                        margin-right: 20rpx;
                    }
                }
            }
           
            .radio {
                transform: scale(0.7);
            }
        }
    }
    .submitbtn {
        background-image: linear-gradient(to right, #ff7914 0%, #ff5501 100%);
        width: 510rpx;
        height: 96rpx;
        border-radius: 46rpx;
        margin-top: 60rpx;
    }
   
    .custom-view {
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: center;
        .payshow {
            width: 570rpx;
            height: 662rpx;
            border-radius: 6rpx;
			  position: relative;
            .image {
                width: 100%;
                height: 372rpx;
                position: absolute;
                // top: -30rpx;
            }
            .foot {
                width: 100%;
                height: 290rpx;
                background: white;
                position: absolute;
                top: 355rpx;
                text-align: center;
                border-bottom-right-radius: 24rpx;
                border-bottom-left-radius: 24rpx;
                view:nth-child(1) {
                    margin-top: 40rpx;
                    font-size: 28rpx;
                    color: #ff5300;
                }
                .btn {
                    font-size: 28rpx;
                    color: #ffffff;
                    width: 350rpx;
                    border-radius: 40rpx;
                    margin-top: 45rpx;
                     background-image: linear-gradient(to right, #ff7914 0%, #ff5501 100%);
                }
                .foot-img {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 40rpx;
                    text {
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .image1 {
                        width: 10rpx;
                        height: 20rpx;
                        margin-left: 8rpx;
                    }
                }
            }
        }
    }
}
</style>

